<template>
  <div class="divBox relative">
    <el-card class="box-card mt14" :body-style="{ padding: '20px 20px' }" shadow="never" :bordered="false">
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="queryParams" class="demo-form-inline mb8">
        <el-form-item label="用户名：">
          <el-input v-model="queryParams.userName" placeholder="请输入" size="small" />
        </el-form-item>
        <!-- <el-form-item label="商品名称：">
          <el-input v-model="queryParams.productName" placeholder="请输入" size="small" />
        </el-form-item> -->
        <el-form-item label="试衣状态：">
          <el-select v-model="queryParams.status" placeholder="请选择" size="small" clearable>
            <el-option label="成功" value="1" />
            <el-option label="失败" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="试衣时间：">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="list" style="width: 100%">
        <el-table-column label="试衣ID" align="center" prop="id" width="100" />
        <el-table-column label="用户名" align="center" prop="userName">
          <template slot-scope="scope">
            <!-- <el-avatar :src="scope.row.avatar" size="small" style="margin-right: 6px" /> -->
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" prop="gender" width="60" >
            <template slot-scope="scope">
                {{ scope.row.gender == 1 ? '男' : '女' }}
            </template>
        </el-table-column>
        <!-- <el-table-column label="商品名称" align="center" prop="productName" /> -->
        <el-table-column label="试衣图片" align="center" prop="productImg">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.aiClothesUrl" :preview-src-list="[scope.row.aiClothesUrl]" />
          </template>
        </el-table-column>
        <el-table-column label="生成视频" align="center" prop="fittingImg">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.aiClothesUrl" @click.stop="handleClickVideo(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" style="color: #13ce66"><i class="el-icon-circle" style="font-size: 12px;vertical-align: middle;margin-right: 2px;color: #13ce66"></i>成功</span>
            <span v-else style="color: #ff4949"><i class="el-icon-circle" style="font-size: 12px;vertical-align: middle;margin-right: 2px;color: #ff4949"></i>失败</span>
          </template>
        </el-table-column>
        <el-table-column label="试衣时间" align="center" prop="createTime" width="180" />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="currentChange"
        @size-change="sizeChange"
        class="mt14"
      />
    </el-card>
    <el-dialog :visible.sync="videoDialogVisible" width="500px" height="900px" title="视频播放" @close="handleCloseVideo">
      <video v-if="videoUrl" :src="videoUrl" controls autoplay style="width:100%"></video>
    </el-dialog>
  </div>
</template>

<script>
import { getAiFittingRecordListApi } from '@/api/model';
import dayjs from 'dayjs';
export default {
  name: 'Fitting',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        userName: null,
        status: null,
        startTime: '',
        endTime: '',
        page: 1,
        limit: 10,
        type: 2,
      },
      dateRange: [],
      videoDialogVisible: false,
      videoUrl: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    currentChange(page) {
      this.queryParams.page = page;
      this.getList();
    },
    sizeChange(value) {
      this.queryParams.limit = value;
      this.getList();
    },
    handleClickVideo(row) {
      this.videoUrl = row.aiClothesCompleteUrl;
      this.videoDialogVisible = true;
    },
    handleCloseVideo() {
      this.videoDialogVisible = false;
      this.videoUrl = '';
    },
    getList() {
      this.loading = true;
      if (this.dateRange && this.dateRange.length === 2) {
        this.queryParams.startTime = dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
        this.queryParams.endTime = dayjs(this.dateRange[1]).format('YYYY-MM-DD') + ' 23:59:59';
      } else {
        this.queryParams.startTime = '';
        this.queryParams.endTime = '';
      }
      getAiFittingRecordListApi(this.queryParams).then((res) => {
        this.list = res.list;
        this.total = res.total;
        this.loading = false;
      });
    },
    resetQuery() {
      this.queryParams = { userName: '', status: '', startTime: '', endTime: '', page: 1, limit: 10, type: 2 };
      this.dateRange = [];
      this.getList();
    },
  },
};
</script>

<style scoped>
.divBox {
  min-height: 100vh;
}
</style>